<template>
    <el-card class="stat-card" :style="{ borderLeft: `4px solid ${color}` }">
      <div class="stat-content">
        <div class="stat-icon" :style="{ color }">
          <el-icon><component :is="icon" /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-title">{{ title }}</div>
          <div class="stat-value">
            <span v-if="prefix">{{ prefix }}</span>
            {{ formattedValue }}
            <span v-if="suffix">{{ suffix }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    title: String,
    value: [Number, String],
    icon: String,
    color: {
      type: String,
      default: '#409EFF'
    },
    prefix: String,
    suffix: String
  })
  
  const formattedValue = computed(() => {
    return typeof props.value === 'number' 
      ? props.value.toLocaleString() 
      : props.value
  })
  </script>
  
  <style scoped>
  .stat-card {
    margin-bottom: 0;
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
  
  .stat-content {
    display: flex;
    align-items: center;
  }
  
  .stat-icon {
    font-size: 36px;
    margin-right: 15px;
  }
  
  .stat-info {
    flex: 1;
  }
  
  .stat-title {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  </style>